/* postcss-px-to-viewport-1 */
.home {
  color: #000;
  width: 100%;

  .banner {
    position: relative;
    text-align: center;
    .texts {
      position: absolute;
      top: 432px;
      width: 100%;

      .t1 {
        font-size: 73px;
        font-weight: bold;
        // 字体渐变
        background: linear-gradient(180deg, #ffffff 0%, #938d8b 111.97%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-fill-color: transparent;
        margin-bottom: 24px;
        text-align: center;
      }
      .t2 {
        font-size: 24x;
        margin-top: 40px;
        font-weight: 400;
        line-height: 150%;
        color: rgba(220, 220, 220, 1);
      }
      .t3 {
        font-size: 20px;
        margin-top: 57px;
        font-weight: 300;
        color: rgba(220, 220, 220, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          height: 28px;
          margin-left: 20px;
        }
      }
    }
  }
  .box2 {
    width: 100%;
    background: #000000;
    box-sizing: border-box;
    padding: 98px 103px 232px 98px;
    .rowBox {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 55.78px;
      &:last-child {
        margin-bottom: 0px;
      }
      .t1 {
        font-family: DM Sans;
        font-weight: 700;
        font-size: 29.17px;
        line-height: 75.94px;
        letter-spacing: -1.58px;
        vertical-align: middle;
        color: #e9e9e9;
      }
      .t2 {
        font-family: Inter;
        font-weight: 500;
        font-size: 23.73px;
        line-height: 28.8px;
        letter-spacing: -1.27px;
        vertical-align: middle;
        color: #8c8c8c;
      }
      .desc {
        position: absolute;
        top: 361.43px;
        left: 43.29px;
      }
      .box1 {
        width: 537.94px;
        height: 601.22px;
        border-radius: 23.73px;
        background-image: url(@/assets/svg/page4_1.svg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        .t1 {
          margin-bottom: 12.66px;
        }
      }
      .box2 {
        width: 537.94px;
        height: 601.22px;
        border-radius: 23.73px;
        background-image: url(@/assets/svg/page4_2.svg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        .t1 {
          margin-bottom: 12.66px;
        }
      }
      .box3 {
        width: 537.94px;
        height: 601.22px;
        border-radius: 23.73px;
        background-image: url(@/assets/svg/page4_3.svg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
      }
      .box4 {
        width: 672px;
        height: 740px;
        border-radius: 20px;
        background-color: rgba(15, 15, 15, 1);
        position: relative;
        box-sizing: border-box;
        border: 1px solid rgba(255, 255, 255, 0.2);
        .desc {
          position: absolute;
          top: 63.38px;
          left: 89px;
          .tt1 {
            font-family: DM Sans;
            font-weight: 700;
            font-size: 50px;
            line-height: 60px;
            letter-spacing: -3.14px;
            vertical-align: middle;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 154px;
          }
          .tt2 {
            font-family: DM Sans;
            font-weight: 500;
            font-size: 24.77px;
            line-height: 31.71px;
            letter-spacing: -1.31px;
            vertical-align: middle;
            color: rgba(233, 233, 233, 1);
          }
        }
      }
      .box5 {
        width: 972.83px;
        height: 743px;
        border-radius: 19.66px;
        background-image: url(@/assets/svg/page4_4.svg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
      }
    }
  }
}
